<template>
  <view>
    <!-- 头部导航栏 -->
    <view class="top-navigate bg-yellow" style="padding: 53px 10px 20px 10px;">
      <view class="content cuIcon-back text-xl top-navigate-title" @click="goBack()">
      </view>
      <view class="text-xl top-navigate-title">订单详情</view>
    </view>
    <!-- 待接单订单信息 -->
    <order-in-pending :order="order" v-if="order.state==='待接单'&& order.type!=='万能帮'"></order-in-pending>

    <!-- 进行中订单 -->
    <order-in-progress :order="orderDetailInfo" v-if="order.state==='进行中'"></order-in-progress>

    <!-- 特殊：万能帮订单 -->
    <view class="order-detail-info" v-if="order.type==='万能帮'" style="top: 10px;">
      <!-- 投稿信息 -->
      <view class="cu-form-group">
        <view class="title">投稿：</view>
        <view>{{order.helpInfo.content}}</view>
      </view>
      <!-- 图片显示区域 -->
      <view class="cu-form-group" v-if="imgList.length>0">
        <view class="grid col-4 grid-square flex-sub">
          <view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage" :data-url="item">
            <image :src="item" mode="aspectFill" style="position: absolute;left:0"></image>
          </view>
        </view>
      </view>
<!--      <comment-section></comment-section> -->
      <!-- 评论区 -->
    </view>

    <!-- 订单地址定位信息区域 -->
    <view class="addressInfo" v-if="order.finished">
      <view class="item_box">
        订单类型 ：
        <view class="address">
          {{orderInfo.type}}
        </view>
      </view>
      <!-- 代取送 -->
      <view class="order-detail border-top" v-if="orderInfo.type==='代取送'">
        <view class="order-detail-title text-df ">物品类型: <text class="text-gray"
            style="margin-left: 20px;">{{orderInfo.goodsInfo.goodsType}}</text> </view>
        <view class="order-detail-title text-df ">物品重量: <text class="text-gray"
            style="margin-left: 20px;">{{orderInfo.goodsInfo.goodsWeight}}kg</text></view>
        <view class="order-detail-title text-df ">跑腿距离: <text class="text-gray"
            style="margin-left: 20px;">{{orderInfo.distance}}</text>
        </view>
        <view class="order-detail-title text-df ">备注: <text class="text-gray"
            style="margin-left: 20px;">{{orderInfo.note}}</text>
        </view>
      </view>



      <!-- 图片显示区域 -->
      <view class="cu-form-group" v-if="imgList.length>0">
        <view class="grid col-4 grid-square flex-sub">
          <view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage" :data-url="item">
            <image :src="item" mode="aspectFill" style="position: absolute;left:0"></image>
          </view>
        </view>
      </view>

      <view class="item_box" v-if="orderInfo.type==='代购'">
        商品:
        <view class="address">
          {{orderInfo.goodsInfo.goodsDetail}}
        </view>
      </view>
      <view class="item_box" v-if="orderInfo.shopAddress.address">
        指定店铺:
        <view class="address">
          {{orderInfo.shopAddress.address}}
        </view>
      </view>

   <!--   <view class="item_box">
        用户信息：
      </view>
      <view class="order-detail border-top">
        <view class="order-detail-title text-df ">姓名: <text class="text-gray"
            style="margin-left: 20px;">{{orderDetailInfo.userInfo.userName}}</text> </view>
        <view class="order-detail-title text-df ">电话: <text class="text-gray"
            style="margin-left: 20px;">{{orderDetailInfo.userInfo.userPhone}}</text></view>
      </view> -->

      <view class="item_box">
        骑手信息：
      </view>
      <view class="order-detail border-top">
        <view class="order-detail-title text-df ">姓名: <text class="text-gray"
            style="margin-left: 20px;">{{orderDetailInfo.runnerInfo.runnerName}}</text> </view>
        <view class="order-detail-title text-df ">电话: <text class="text-gray"
            style="margin-left: 20px;">{{orderDetailInfo.runnerInfo.runnerPhone}}</text></view>
      </view>

      <view class="item_box" v-if="orderInfo.pickAddress">
        取件 ：
        <view class="address">
          {{orderInfo.pickAddress.address}}
        </view>
      </view>

      <view class="item_box" v-if="orderInfo.deliveryAddress">
        收货：
        <view class="address">
          {{orderInfo.deliveryAddress.address}}
        </view>
      </view>

      <view class="item_box">
        送达时间：
        <view class="address">
          {{orderDetailInfo.finishedTime}}
        </view>
      </view>

    </view>


  </view>
</template>

<script>
  import {
    mapState,
    mapMutations
  } from 'vuex'
  const db = uniCloud.database();
  export default {
    data() {
      return {
        order: {},
        imgList: [],
        orderId: '',
        orderDetailInfo: [],
        orderInfo:{},
        addressEnd:''
      };
    },
    onLoad(options) {
      this.orderId = JSON.parse(options.orderId);
      this.getOrder();
    },
    mounted() {
      this.orderDetail()
    },
    computed: {
      ...mapState('m_user', ['userinfo']),
    },
    methods: {
      ViewImage(e) {
        uni.previewImage({
          urls: this.imgList,
          current: e.currentTarget.dataset.url
        });
      },
      async getOrder() {
        const {
          result: res
        } = await db.collection("runner_order").where({
          userId: this.userinfo._id
        }).get()
        this.orderDetailInfo = res.data.filter((item) => item.orderInfo._id === this.orderId)[0];
        this.orderInfo = this.orderDetailInfo.orderInfo;
        this.imgList = this.orderInfo.goodsInfo.imgList;
      },
      //返回按钮
      goBack() {
        uni.navigateBack();
      },
      async orderDetail() {
        const {
          result: res
        } = await db.collection("my_order").where({
          _id: this.orderId
        }).get()
        this.order = res.data[0]
        if (this.order.type === '万能帮') {
          this.imgList = this.order.helpInfo.imgList;
        }
      }
    }
  }
</script>

<style lang="scss">
  .top-navigate {
    z-index: !important;
    position: relative;
    display: flex;
    justify-content: left;
    align-items: center;

    .top-navigate-title {
      margin: 0 5px;
      font-weight: bold;
    }
  }

  .order-detail-info {
    position: relative;
    margin: 0 auto;
    background-color: white;
    padding: 5px;
    border-radius: 10px;
    width: 95%;
    top: 0;
    bottom: 0;
    left: 0;

    .pick-send-address {
      margin: 10px;
      border-bottom: 1px #efefef solid;

      .address-now,
      .address-new {
        height: 50px;
        display: flex;
        justify-content: left;
        align-items: center;

        .address-text {
          margin-left: 20px;
          display: flex;
          flex-direction: column;

        }
      }

      .address-new {
        height: 50px;
        border-radius: 10px;
        background-color: #efefef;
        display: flex;
        justify-content: left;
        align-items: center;
      }
    }
  }

  .addressInfo {
    width: 100%;
    background-color: white;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    flex-direction: column;

    .order-detail {
      background-color: #ffffff;
      padding: 1rpx 30rpx;
      display: flex;
      min-height: 100rpx;
      justify-content: space-between;
      flex-direction: column;
      border-bottom: 1px solid #eee;

      .order-detail-title {
        margin: 10px 0;
      }
    }

    .item_box {
      height: 45px;
      display: flex;
      font-size: 16px;
      align-items: center;
      justify-content: space-between;
      line-height: 45px;
      margin: 5px 16px;

      .address {
        flex: 1;
        overflow: scroll;
        white-space: nowrap;
      }
    }
  }
</style>